<template>
  <el-dialog
    v-model="dialogVisible"
    :title="editFlag ? '编辑种植农资' : '新增种植农资'"
    width="30%"
    custom-class="diyclass"
  >
    <div class="mcontent">
      <div class="mchild">
        <div class="label">农资名称:</div>

        <el-input
          :disabled="editFlag"
          v-model="form.value.farmResourceName"
          placeholder="请输入内容"
          clearable
        />
      </div>
      <div class="mchild">
        <div class="label">农资类型:</div>
        <el-input
          :disabled="editFlag"
          v-model="form.value.categoryName"
          placeholder="请输入内容"
          clearable
        />
      </div>
      <div class="mchild">
        <div class="label">编号:</div>
        <el-input
          v-model="form.value.licenseNumber"
          placeholder="请输入内容"
          clearable
        />
      </div>
      <div class="mchild">
        <div class="label">主要成分:</div>
        <el-input
          v-model="form.value.element"
          placeholder="请输入内容"
          clearable
        />
      </div>
      <div class="mchild">
        <div class="label">单价(元):</div>
        <el-input
          v-model="form.value.unitPrice"
          placeholder="请输入内容"
          clearable
        />
      </div>
      <div class="mchild">
        <div class="label">计量单位:</div>
        <el-input
          v-model="form.value.unitMeasurement"
          placeholder="请输入内容"
          clearable
        />
      </div>
      <div class="mchild">
        <div class="label">规格:</div>
        <el-input
          v-model="form.value.spec"
          placeholder="请输入内容"
          clearable
        />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button :disabled="!overFlag" @click="submit">提交</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { computed,defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import {post,get} from '@/public/request/api'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
export default defineComponent({
  components: {
   
  },
 
  setup(props, { emit }) {
    const state = reactive(props);
    //变量
    let dialogVisible=ref(false)
    let editFlag=ref(false)
    let form=reactive({
        value:{
            farmResourceName:'',
            licenseNumber:'',
            element:'',
            categoryName:'',
            unitMeasurement:'',
            unitPrice:'',
            spec:'',
            id:'',
        }
    })
   
    let overFlag=computed({
      get(){
        return form.value.farmResourceName&&form.value.licenseNumber
        &&form.value.element&&form.value.categoryName
        &&form.value.unitMeasurement&&form.value.unitPrice&&form.value.spec
      },
      set(value){
      }
    })
    // 生命周期
    onMounted(() => {
      //
    });

    onUnmounted(() => {
      //
    });

    //methods
    function init(val){
      console.log('init!',val)
      form.value=val
    }
    function submit(){
        if(!editFlag.value){
            post('/farmResource/add',form.value).then(res=>{
              if(res.code==200){
                ElMessage({
                    message: '新增成功',
                    type: 'success',
                })
                emit('getList')
                dialogVisible.value = false
                form.value={
                        farmResourceName:'',
                        licenseNumber:'',
                        element:'',
                        categoryName:'',
                        unitMeasurement:'',
                        unitPrice:'',
                        spec:'',
                        id:'',
                    }
              }
            }).catch(err=>{
              ElMessage({
                    message: err.message,
                    type: 'error',
                })
            })
        }else{
          post('/farmResource/edit',form.value).then(res=>{
              if(res.code==200){
                ElMessage({
                    message: '编辑成功',
                    type: 'success',
                })
                emit('getList')
                dialogVisible.value = false
                form.value={
                        farmResourceName:'',
                        licenseNumber:'',
                        element:'',
                        categoryName:'',
                        unitMeasurement:'',
                        unitPrice:'',
                        spec:'',
                        id:'',
                    }
              }
            }).catch(err=>{
              ElMessage({
                    message: err.message,
                    type: 'error',
                })
            })
        }
    }
    // return
    return {
        init,
        dialogVisible,
        editFlag,
        form,
        submit,
        overFlag
    };
  },
});
</script>

<style lang="scss">
.setwrap{
  .el-table th.el-table__cell,.el-table .el-table__cell,.el-table tr,.el-table--fit{
    background: transparent!important;
    color: #fff!important;
  }
  .el-table th.el-table__cell.is-leaf,.el-table td.el-table__cell{
    border-bottom: 1px solid rgba(255, 255, 255, 0.08)!important
  }
  .el-pagination.is-background .el-pager li{
    background: transparent!important;
    color: #fff!important;
  }
  .el-pagination.is-background .btn-next{
    background: none!important;
  }
  .btn-prev{
    background: none!important;
  }
   .el-input__wrapper{
    background: rgba(255, 255, 255, 0.08)!important;
    width: 200px;
    border-radius: 200px;
    border: none!important;
    box-shadow: none;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.setwrap{
 
  .btn3{
    width: 100px!important;
    margin-left: 10px;
  }
  .btn7{
    width: 77px!important;
  }
  .cost{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    font-size: 20px;
    span{
      font-weight: bold;
      font-size: 25px;
      margin-left: 10px;
    }
  }
  .fy{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .total{
      color: rgba(255, 255, 255, 0.60);
      font-size: 10px;
      span{
        font-size: 20px;
      }
    }
    
  }
  .table{
    margin-top: 20px;
  }
  .btnwrap{
    display: flex;
    align-items: center;
    .btntext{
      color:rgba(49, 127, 245, 1) ;
      cursor: pointer;
    }
    .delete{
      color: rgba(245, 98, 98, 1)!important;
      margin-left: 15px;
    }
  }
  .titlecommon2{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .btn2{
    width: 70px;
    box-sizing: border-box;
    padding: 5px 10px!important;
    margin-top: 20px;
  }
  .btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
      background: rgba(9, 127, 229, 1);
      font-size: 14px;
      padding: 5px 20px;
      border-radius: 5px;
      cursor: pointer;
  }

}

</style>

